<template>
  <div class="com-push" :style="otherWidth?('width: calc(100% - ' + otherWidth + ');'):''">
    <p class="com-push-title">{{title}}</p>
    <div class="com-push-line" v-for="(item, i) in topRank" :key='item[keyStr]'>
      <p class="com-push-list">
        <span :class="['com-push-sn', i<3?('com-push-sn'+i):'']">{{i+1}}</span>
        <span class="com-push-name"><router-link :to="'/index/bookDetail?id='+item[keyStr]" :target="global.goBookDetailType">{{item.bookName}}</router-link></span>
      </p>
      <div v-if='i == 0' class="com-push-show">
        <router-link :to="'/index/bookDetail?id='+item[keyStr]" :target="global.goBookDetailType">
          <img :src="item.picUrl" alt="" class="com-push-small">
          <div class="com-push-desc" v-html="item.bookDesc"></div>
        </router-link>
      </div>
    </div>
    <router-link :to="'/index/ranked?rankType='+rankType" v-if="topRank.length >= 10">
      <div class="look-more">
        <span class="look-text">查看更多></span>
      </div>
    </router-link>
  </div>
</template>

<script>
export default {
  props:{
    otherWidth:String,
    title:String,
    topRank:Array,
    keyStr:{
      type:String,
      default:'id'
    },
    rankType:String
  },
}
</script>

<style lang='scss' scoped>
.com-push {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 240px - 75px - 400px);
  .com-push-title {
    height: 40px;
    margin: 0;
    font-size: 20px;
    border: 1px solid #E0E0E0;
    border-width: 0 0 2px 0;
    font-weight: bold;
    color: #333333;
  }

  .com-push-line {
    .com-push-list {
      line-height: 18px;
      font-size: 14px;
      margin: 12px 0;
      .com-push-sn {
        text-align: center;
        display: inline-block;
        width: 18px;
        height: 18px;
        color: #fff;
        background-color: #999999;
        margin-right: 7px;
        font-size: 13px;
      }
      .com-push-sn0 {
        background-color: #FC7403;
      }
      .com-push-sn1 {
        background-color: #F79415;
      }
      .com-push-sn2 {
        background-color: #FFA95E;
      }

      // .com-push-name {
        
      // }
    }

    .com-push-show {
      height: 80px;
      padding: 10px;
      // display: flex;
      overflow: hidden;
      background-color: #F7F7F7;
      .com-push-small {
        display: inline-block;
        vertical-align: top;
        width: 60px;
        height: 80px;
      }

      .com-push-desc {
        // display: inline-block;
        float: right;
        width: calc(100% - 70px);
        overflow: hidden;
        font-size: 13px;
        color: #808080;
        height: calc(100% - 10px);
      }
      .com-push-desc:hover {
        color: $base-color;
      }
    }
  }

  .look-more {
    height: 35px;
    width: 100%;
    text-align: center;
    background-color: #F7F7F7;
    color: #5F5F5F;
    .look-text {
      line-height: 35px;
    }
  }
  .look-more:hover{
    color: $base-color;
  }

}
</style>